<template>
	<view>
		<u-navbar title="群聊">
			<view slot="right" class="plus u-m-r-30" :class="{show:plus.show}" @tap="plus.show=!plus.show">
				<view class="icon iconfont icon-increase u-font-50"></view>
				<view class="oper">
					<navigator url="/pages/friend/search" hover-class="none" class="u-p-y-20 u-p-x-30 u-flex">
						<text class="cuIcon-friendadd u-m-r-20 u-font-50 text-bold"></text>
						<text class="u-font-34 text-bold u-m-l-6">添加好友</text>
					</navigator>
					<view class="u-p-y-20 u-p-x-30 u-flex" @tap="scan">
						<text class="cuIcon-scan u-m-r-20 u-font-50 text-bold"></text>
						<text class="u-font-34 text-bold u-m-l-6">扫一扫</text>
					</view>
					<navigator url="/pages/group/create" hover-class="none" class="u-p-y-20 u-p-x-30 u-flex">
						<text class="cuIcon-group u-m-r-20 u-font-50 text-bold"></text>
						<text class="u-font-34 text-bold u-m-l-6">创建群聊</text>
					</navigator>
				</view>
			</view>
		</u-navbar>
		<view class="body">
			<view class="bg-white u-flex u-p-x-30 u-p-y-20 u-border-bottom"
				v-for="(item,index) in list" 
				:key="index"
				@tap="multiChat(item)"
			>
				<u-avatar :src="item.saveAvatar||item.avatar" mode="square"></u-avatar>
				<view class="u-m-l-20">
					<view>
						<text class="u-font-34">{{item.name}}</text>
					</view>
					<view class="u-flex">
						<text v-if="userInfo.userId == item.userId" class="cu-tag sm bg-orange radius u-m-r-10">群主</text>
						<text class="u-font-24 text-gray">{{item.userCount}}人</text>
					</view>
				</view>
			</view>
		</view>
		<real-dialog v-model="realAsk.show"></real-dialog>
	</view>
</template>

<script>
	import {jumpTo,delay,toast} from "@/utils/util.js"
	import * as chatAPI from "@/api/chat.js"
	import {mapGetters,mapActions} from "vuex"
	import realDialog from "@/components/dialogs/realname/index.vue"
	import { scanCode } from "@/utils/file"
	export default {
		components:{
			realDialog
		},
		data() {
			return {
				key:'',
				plus:{
					show:false
				},
				realAsk:{
					show:false,
				},
			};
		},
		computed:{
			...mapGetters('user',['userInfo','userId','isReal']),
			...mapGetters('addr',['groups']),
			list(){
				return this.groups.filter(({name})=>name.includes(this.key))
			}
		},
		onLoad() {
			this.fetchAllgroups()
		},
		async onPullDownRefresh() {
			try{
				await delay(1000)
				await this.fetchAllgroups()
			}finally{
				uni.stopPullDownRefresh()
			}
		},
		methods: {
			...mapActions('chat', ['setConversation']),
			...mapActions('addr',['fetchAllgroups']),
			...mapGetters('system',['examine']),
			async multiChat(group){
				this.setConversation({
					id:group.id,
					type:1,
					avatar:group.avatar,
					name:group.name
				})
				jumpTo(`/pages/room/multi?id=${group.id}`)
			},
			async resetGroups(){
				this.groups.list = []
				this.groups.nomore = false
				this.groups.pageNo = 1
				await this.moreGroups()
			},
			async moreGroups(){
				const list = await this.getGroups()
				this.groups.list.push(...list)
			},
			async getGroups(){
				if(this.groups.loading){
					throw new Error('正在请求中')
				}
				try{
					if(this.groups.nomore){
						return []
					}
					this.groups.loading = true
					const list =  await chatAPI.getGroups(this.groups)
					if(!list||list.length<this.groups.pageSize){
						this.groups.nomore = true
					}else{
						this.groups.pageNo++
					}
					return list 
				}finally{
					this.groups.loading = true
				}
			},
			async scan(){
				const {result} = await scanCode({scanType:['qrCode']})
				if(/^API:/.test(result)){
					const [fun,pram] =result.slice(4).split('?')
					const pramObj = !!pram?pram.split('&').map(item=>item.split('=')).reduce((r,[k,v])=>{r[k]=v; return r},{}):undefined;
					this[fun]&&this[fun](pramObj)
				}
				if(/^PATH:/.test(result)){ 
					const url = result.slice(5)
					uni.navigateTo({
						url
					})
				}
				if(/^login:qr:/.test(result)){
					const id = result.slice(9)
					uni.navigateTo({
						url:`/pages/login/scan?id=${id}`
					})
				}
			},
			realGuard(){
				if(!this.isReal){
					this.realAsk.show = true
					throw new Error('请完成实名认证')
				}
			},
			realJump(url){
				this.realGuard()
				jumpTo(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.plus{
		position: relative;
		.icon{
			transition: all 0.3s ease-out;
		}
		&::before{
			content: '';
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 3;
			pointer-events: none;
			transition: all 0.3s ease-out;
		}
		.oper{
			position: absolute;
			bottom: -18rpx;
			right: -8rpx;
			
			white-space: nowrap;
			padding: 30rpx 40rpx 30rpx 10rpx;
			background-color: #FFFFFF;
			z-index: 4;
			transform: translateY(90%);
			border-radius: 10rpx;
			opacity: 0;
			transition: all 0.3s ease-out;
			pointer-events: none;
			&::before{
				content: '';
				position: absolute;
				top: -18rpx;
				right: 20rpx;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 20rpx solid #FFFFFF;
			}
		}
		&.show{
			.icon{
				transform: rotate(45deg);
			}
			&::before{
				background-color: rgba($color: #000000, $alpha: 0.6);
				pointer-events: auto;
			}
			.oper{
				opacity: 1;
				transform: translateY(100%);
				pointer-events: auto;
			}
		}
		
	}
</style>
